<template>
  <el-dialog title="查看即时测验" :close-on-click-modal="false" :destroy-on-close="true" width="1000px" :visible.sync="isShow" :before-close="closeBox">
    <div class="online-diglogBox">
      <div class="online-dialogCons">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
          <el-form-item prop="testTitle" label="标题名称">
            <el-input v-model="ruleForm.testTitle" autocomplete="off" readonly></el-input>
          </el-form-item>
          <el-form-item prop="isLimited" label="答题限时">
            <el-radio-group v-model="ruleForm.isLimited" disabled>
              <el-radio label="1">限时</el-radio>
              <el-radio label="0">不限时</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="isAppraised" label="" v-if="ruleForm.isLimited===1">
            限时
            <el-input-number v-model="ruleForm.limitedTime" autocomplete="off" :min="1" style="margin: 0 15px;width: 150px;"></el-input-number>
            分钟
          </el-form-item>
          <el-form-item prop="answerAnalyseIsOpened" label="答案解析">
            <el-radio-group v-model="ruleForm.answerAnalyseIsOpened" disabled>
              <el-radio label="1">开放</el-radio>
              <el-radio label="0">不开放</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div class="test-box">{{test.classNames}}</div>
        <div class="test-box">
          <div>学生人数：{{test.stuNum}}人</div>
          <div>已完成：{{test.finishedNum}}人</div>
        </div>
        <div class="test-box">
          <div>最高：{{test.topScore}}分</div>
          <div>最低：{{test.lowScore}}分</div>
          <div>平均：{{test.averageScore}}分</div>
        </div>
        <div class="test-box">
          <div>平均时长：{{test.averageDuration}}</div>
          <div>显示人数：人数/占比</div>
        </div>
        <el-table :data="scoreData" border style="width: 100%;margin: 10px 0;">
          <el-table-column prop="date" label="90-100">
            <template slot-scope="scope">
              {{scope.row.intervalRate100}}%
            </template>
          </el-table-column>
          <el-table-column prop="subject_content" label="80-90">
            <template slot-scope="scope">
              {{scope.row.intervalRate90}}%
            </template>
          </el-table-column>
          <el-table-column prop="subject_content" label="70-80">
            <template slot-scope="scope">
              {{scope.row.intervalRate80}}%
            </template>
          </el-table-column>
          <el-table-column prop="subject_content" label="60-70">
            <template slot-scope="scope">
              {{scope.row.intervalRate70}}%
            </template>
          </el-table-column>
          <el-table-column prop="subject_content" label="60分以下">
            <template slot-scope="scope">
              {{scope.row.intervalRate0}}%
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="online-dialogCons">
        <div class="question-title" v-if="topic.subject_content" v-html="'【'+ topic.sort_index + '】' + topic.subject_content"></div>
        <!-- 图片 -->
        <div class="media-box" v-if="topic.display_type === '2'">
          <img :src="topic.file_url" style="width:100%">
        </div>
        <!-- 音频 -->
        <div class="media-box" v-if="topic.display_type === '3'">
          <audio class="audio" controls :src="topic.file_url" controlsList="nodownload"></audio>
        </div>
        <!-- 视频 -->
        <div class="media-box" v-if="topic.display_type === '4'">
          <video class="video" controls :src="topic.file_url">
          </video>
        </div>
        <div v-for="(item, i) in topic.options" :key="i">
          <div class="item" :class="{ active: item.num === item.right_answer}">
            <span class="chooseBtn" >{{item.num}}</span>
            <span class="question-content" v-if="topic.subject_type==='13'" >
              {{ item.right_answer }}
            </span>
          </div>
        </div>
        <!-- 底部按钮 -->
        <div class="controller">
          <div>
            <el-button :disabled="currentTopicIndex === 0" @click="jumpPage(-1)">上一题</el-button>
            <el-button :disabled="currentTopicIndex === test.subjectList.length - 1" @click="jumpPage(1)" >下一题</el-button>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getOnlineTest } from '@/api/teacher/onlineCourse'
export default {
  props: ['id'],
  data () {
    return {
      isShow: true,
      ruleForm: {
        testTitle: undefined,
        isLimited: '0',
        limitedTime: undefined,
        answerAnalyseIsOpened: '0'
      },
      rules: {
        testTitle: [{ required: true, message: '请输入标题名称', trigger: 'blur' }],
        limitedTime: [{ required: true, message: '请输入限时分钟数', trigger: 'blur' }]
      },
      keyWord: '',
      subjects: [],
      scoreData: [
        {
          intervalRate0: '10%',
          intervalRate70: '20%',
          intervalRate80: '30%',
          intervalRate90: '20%',
          intervalRate100: '20%'
        }
      ],
      test: {
        answerAnalyseIsOpened: 1,
        averageDuration: 1000,
        averageScore: 1,
        classNames: 1,
        finishedNum: 1,
        intervalRate0: 1,
        intervalRate70: 1,
        intervalRate80: 1,
        intervalRate90: 1,
        intervalRate100: 1,
        isLimited: 1,
        limitedTime: 1,
        lowScore: 1,
        topScore: 1,
        stuNum: 1,
        subjectNum: 1,
        testTitle: 1,
        subjectList: []
      },
      topic: {
        file_url: '',
        display_type: '',
        sort_index: '', // 第几题
        subject_id: '', // 题目id
        subject_content: '', // 题目内容
        subject_type: 10, // 题目类型
        itemList: [], // 选项
        options: [] // 题目配置项
      },
      currentTopicIndex: 0
    }
  },
  methods: {
    async getOnlineTest () {
      const res = await getOnlineTest({
        testId: this.id
      })
      if (res.code === '200') {
        this.test = res.data
        this.scoreData = [
          {
            intervalRate0: this.test.intervalRate0,
            intervalRate70: this.test.intervalRate70,
            intervalRate80: this.test.intervalRate80,
            intervalRate90: this.test.intervalRate90,
            intervalRate100: this.test.intervalRate100
          }
        ]
        this.test.averageDuration = this.returnDate(this.test.averageDuration)
        this.ruleForm = {
          testTitle: this.test.testTitle,
          isLimited: this.test.isLimited,
          limitedTime: this.test.limitedTime,
          answerAnalyseIsOpened: this.test.answerAnalyseIsOpened
        }
        this.toggleTopic(0)
      }
    },
    // 切换题目
    toggleTopic (index) {
      this.currentTopicIndex = index
      this.topic.display_type = this.test.subjectList[index].display_type
      this.topic.file_url = this.test.subjectList[index].file_url || ''
      this.topic.sort_index = this.test.subjectList[index].sort_index
      this.topic.subject_id = this.test.subjectList[index].subject_id
      this.topic.subject_type = this.test.subjectList[index].subject_type
      this.topic.subject_content = this.test.subjectList[index].subject_content
      this.topic.itemList = this.test.subjectList[index].itemList
      if (this.topic.subject_type === '13') { // 填空题只根据括号‘（’来识别，若接口出现其他形式的数据则失效，此时改接口返回数据或者增加js功能
        this.topic.options = []
        for (let i = 1; i < this.test.subjectList[index].right_answer_list.length + 1; i++) {
          this.topic.options.push({
            right_answer: this.test.subjectList[index].right_answer_list[i - 1].right_answer,
            num: i
          })
        }
      } else if (this.topic.subject_type === '10' || this.topic.subject_type === '11') {
        this.topic.options = this.topic.itemList.map(el => {
          return {
            num: el.answer_code,
            right_answer: this.test.subjectList[index].right_answer,
            checked: false
          }
        })
      } else if (this.topic.subject_type === '12') {
        this.topic.options = this.topic.itemList.map((el, i) => {
          return {
            num: ['A', 'B'][i],
            right_answer: this.test.subjectList[index].right_answer
          }
        })
      }
    },
    // 点击按钮切换题目
    jumpPage (state) {
      this.currentTopicIndex += state
      this.toggleTopic(this.currentTopicIndex)
    },
    returnDate (time) {
      if (time < 60) {
        return time < 10 ? '00\'0' + time : '00\'' + time
      } else if (time < 3600) {
        return Math.floor(time / 60) < 10 ? '0' + Math.floor(time / 60) + '\'' + (time % 60 < 10 ? '0' + time % 60 : time % 60) : Math.floor(time / 60) + '\'' + (time % 60 < 10 ? '0' + time % 60 : time % 60)
      } else {
        return '大于一小时'
      }
    },
    closeBox () {
      this.$emit('handleEmit')
    }
  },
  mounted () {
    this.getOnlineTest()
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
  .test-box{
    padding: 10px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
  }
  .question-title {
    margin: 0 0 30px;
    font-size: 16px;
    color: #101d37;
    line-height: 2;
    white-space:pre-wrap;
  }
  .item {
    display: flex;border-radius: 3px;align-items: center;margin-bottom: 20px;font-size: 16px;line-height: 2;padding: 0 20px;
    .question-content {
      margin-left: 10px;font-size: 16px;
      input{
        height: 36px;padding: 0 10px;border: none;border-bottom: solid 1px #91959a;outline: none;
      }
    }
    // 右侧的按钮
    .chooseBtn {
      color: #101d37;width: 36px;height: 36px;background: #fff;text-align: center;line-height: 38px;border-bottom: 1px solid #91959a;display: block;
    }
    textarea{
      width: 100%;padding: 10px;line-height: 1.75;outline: none;font-size: 16px;border-radius: 3px;border:solid 1px #91959a; resize:none;
    }
  }
  .item:hover {
    background: #EBEEF5
  }
  .item.active {
    background: #72B6FF;color: #fff
  }
  .item.active .chooseBtn{
    border-color: #72B6FF;color: #72B6FF;
  }
  .item.active .question-content input{
    border-color: #72B6FF;color: #72B6FF;
  }
  // 底部控制按钮
  .controller {
    display: flex;padding: 10px 0;width: 100%;justify-content: space-between;
  }
</style>
